<style lang="less">
  .carousel-demo3 .h-carousel-item .h-carousel-p{
    color: #fff;
    font-size: 36px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }
</style>

<template>
  <div>
    <Carousel :datas="params" arrowType="hover" @clickPage="clickPage" @clickNext="clickNext" @clickPrev="clickPrev" class="carousel-demo3">
      <template slot-scope="{carousel}" slot="item">
        <p class="h-carousel-p">{{carousel.title}}</p>
      </template>
    </Carousel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: false,
      params:[
        {
          title:'Page 1',
          image:'',
        },{
          title:'Page 2',
          image:'',
        },{
          title:'Page 3',
          image:'',
        },{
          title:'Page 4',
          image:'',
        },
      ]
    }
  },
  methods:{
    clickPage(data){
      this.$Message.info(`切换至${data.title}`, 1000);
    },
    clickPrev(data){
      this.$Message.info(`切换至${data.title}`, 1000);
    },
    clickNext(data){
      this.$Message.info(`切换至${data.title}`, 1000);
    },
  }
}
</script>